<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta HTTP-EQUIV="pragma" content="no-cache">
	<meta HTTP-EQUIV="Cache-Control" content="no-store, must-revalidate">
    
    <title>定位页面</title>
   
	<link rel="icon" href="data:;base64,=">
	
	<!-- Bootstrap CSS -->
    <link href="resource/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	
	<!-- 操作区 -->
	<div class="jumbotron">
		<div class="container">
			<h2>操作</h2>			
			<div class="row">
				<div class="col-md-10 col-md-offset-2">
					<form class="form-inline" th:action="@{funcTrace.html}" th:method="post" th:object="${funcTraceForm}">
						 <div class="form-group">
						 	<label for="exampleInputName2">groupID: </label>
						 	 <input type="text" class="form-control" id="groupID" th:field="*{groupID}" placeholder="groupID">
						 	 <button type="submit" class="btn btn-success">确定</button>
						 	 <br />
						 	 <p class="text-danger" th:if="${#fields.hasErrors('groupID')}" th:errors="*{groupID}"></p>
						 </div>
					</form>
					<p />
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-8 col-md-offset-2">				
					<div th:if="${optResult=='success'}" class="alert alert-success fade in alert-dismissable">
						<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
						<strong>成功!</strong>地理位置信息已处理
					</div>
				</div>
			</div>
			<p />
			<p />
		</div>
	</div>
	
	<!-- 地图层 -->
	<div class="container" style="display:none;">
		<div id='container' style="display:none;"></div>
	</div>
	
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key= 个人申请的 PKEY "></script>
    <!-- jQuery -->
    <script src="resource/bootstrap/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件 -->
    <script src="resource/bootstrap/js/bootstrap.min.js"></script>
    
	<script type="text/javascript">	
		//$(document).ready(function(){
		    var map = new AMap.Map('container', {
		        resizeEnable: true
		    });
		    AMap.plugin('AMap.Geolocation', function() {
		        var geolocation = new AMap.Geolocation({
		            enableHighAccuracy: true,//是否使用高精度定位，默认:true
		            timeout: 10000,          //超过10秒后停止定位，默认：5s
		            buttonPosition:'RB',    //定位按钮的停靠位置
		            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
		            zoomToAccuracy: false,   //定位成功后是否自动调整地图视野到定位点	
		        });
		        map.addControl(geolocation);
		        geolocation.getCurrentPosition(function(status,result){
		            if(status=='complete'){
		                onComplete(result)
		            }else{
		                onError(result)
		            }
		        });
		    });
		    
		    //解析定位结果
		    function onComplete(data) {
		        $.ajax({
		            url: "savePageLocat.action?position=" + data.position + "&groupID=" + $("#groupID").val(),
		            //data: [],
		            type: "POST",
		            //dataType: "json",
		            success: function(data) {}
		        });        
		    }
		    //解析定位错误信息
		    function onError(data) {}
		//});	
	</script>
</body>

</html>